<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}农场{% endblock %}</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .product-card {
                @apply bg-white rounded-lg shadow-md overflow-hidden transition-transform duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 transition duration-300;
            }
            .btn-secondary {
                @apply bg-gray-200 text-gray-800 py-2 px-4 rounded-md hover:bg-gray-300 transition duration-300;
            }
            .btn-danger {
                @apply bg-red-600 text-white py-2 px-4 rounded-md hover:bg-red-700 transition duration-300;
            }
        }
    </style>
</head>
<body class="bg-gray-100">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-md">
        <div class="container mx-auto px-4">
            <div class="flex justify-between h-16">
                <!-- 左侧Logo和链接 -->
                <div class="flex items-center">
                    <a href="{{ url_for('index') }}" class="text-xl font-bold text-blue-600">农场</a>
                    <div class="hidden md:ml-10 md:flex md:space-x-8">
                        <a href="{{ url_for('index') }}" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">首页</a>
                        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">分类</a>
                        <a href="#" class="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium">特惠</a>
                    </div>
                </div>
                
                <!-- 右侧搜索、购物车和用户菜单 -->
                <div class="flex items-center">
                    <!-- 搜索框 -->
                    <div class="hidden md:block mr-4">
                        <form action="{{ url_for('index') }}" method="get" class="flex">
                            <input type="text" name="search" placeholder="搜索商品..." class="border border-gray-300 rounded-l-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <button type="submit" class="bg-blue-600 text-white px-4 rounded-r-md hover:bg-blue-700">
                                <i class="fa fa-search"></i>
                            </button>
                        </form>
                    </div>
                    
                    <!-- 购物车 -->
                    <a href="{{ url_for('cart') }}" class="p-2 text-gray-700 hover:text-blue-600 relative">
                        <i class="fa fa-shopping-cart text-xl"></i>
                        {% if 'user_id' in session %}
                            {% set cart_count = query_db('SELECT SUM(quantity) as count FROM cart WHERE user_id = ?', [session['user_id']], one=True) %}
                            {% if cart_count and cart_count['count'] > 0 %}
                                <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">
                                    {{ cart_count['count'] }}
                                </span>
                            {% endif %}
                        {% endif %}
                    </a>
                    
                    <!-- 用户菜单 -->
                    <div class="ml-4 relative">
                        {% if 'user_id' in session %}
                            <button class="flex items-center text-gray-700 hover:text-blue-600 focus:outline-none">
                                <i class="fa fa-user-circle text-xl mr-1"></i>
                                <span class="hidden md:inline">{{ session['username'] }}</span>
                                <i class="fa fa-chevron-down ml-1 text-xs"></i>
                            </button>
                            <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10">
                                <a href="{{ url_for('orders') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">我的订单</a>
                                <a href="{{ url_for('logout') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">退出登录</a>
                            </div>
                        {% else %}
                            <a href="{{ url_for('login') }}" class="text-gray-700 hover:text-blue-600">
                                <i class="fa fa-user-circle text-xl mr-1"></i>
                                <span class="hidden md:inline">登录/注册</span>
                            </a>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </nav>

    <!-- 消息提示 -->
    {% with messages = get_flashed_messages() %}
        {% if messages %}
            <div class="container mx-auto px-4 py-3">
                {% for message in messages %}
                    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 mb-2">
                        {{ message }}
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    {% endwith %}

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-8">
        {% block content %}{% endblock %}
    </main>

    <!-- 页脚 -->
    <footer class="bg-gray-800 text-white mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4">农场</h3>
                    <p class="text-gray-400">提供优质商品和服务</p>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">快速链接</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">关于我们</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">联系方式</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">客户服务</h3>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white">配送信息</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">退换政策</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-semibold mb-4">关注我们</h3>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-weixin text-2xl"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-weibo text-2xl"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa fa-qq text-2xl"></i></a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>&copy; 2023 农场 版权所有</p>
            </div>
        </div>
    </footer>

    <script>
        // 简单的交互脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 用户菜单切换
            const userMenuButton = document.querySelector('button:has(.fa-user-circle)');
            if (userMenuButton) {
                const userMenu = userMenuButton.nextElementSibling;
                userMenuButton.addEventListener('click', function() {
                    userMenu.classList.toggle('hidden');
                });
                
                // 点击其他地方关闭菜单
                document.addEventListener('click', function(event) {
                    if (!userMenuButton.contains(event.target) && !userMenu.contains(event.target)) {
                        userMenu.classList.add('hidden');
                    }
                });
            }
        });
    </script>
</body>
</html>
